<template>
  <div>
      <a-row :gutter="16">
              <a-col :span="showDoubtful ? 4:6">
                <a-card title="累计确诊病例" >
                  <p class="a-card-p-font-style" >{{countryData.totalConfirmed}}</p>
                </a-card>
              </a-col>
              <a-col :span="showDoubtful ? 4:6">
                <a-card title="累计治愈病例" >
                  <p class="a-card-p-font-style" style="color:green">{{countryData.totalCured}}</p>
                </a-card>
              </a-col>
              <a-col :span="showDoubtful ? 4:6">
                <a-card title="累计死亡病例" >
                  <p class="a-card-p-font-style" style="color:red">{{countryData.totalDeath}}</p>
                </a-card>
              </a-col>
              <a-col :span="showDoubtful ? 4:6">
                <a-card title="总新增病例" >
                  <p class="a-card-p-font-style" >{{countryData.totalIncrease}}</p>
                </a-card>
              </a-col>
              <a-col :span="showDoubtful ? 4:6">
                <a-card title="总疑似病例" v-if="showDoubtful">
                  <p class="a-card-p-font-style" >{{countryData.totalDoubtful}}</p>
                </a-card>
              </a-col>
              <a-col :span="showDoubtful ? 4:6">
                <a-card title="总新增疑似病例" v-if="showDoubtful">
                  <p class="a-card-p-font-style" >{{countryData.incDoubtful}}</p>
                </a-card>
              </a-col>
            </a-row>
  </div>
</template>

<script>
export default {
    props:{
        countryData:{
            type: Object,
            default:null
        },
        showDoubtful:{
            type:Boolean,
            default: true
        }
    },
    // data(){
    //     return{
    //         span:'4'
    //     }
    // },
    // methods:{
    //     changeSpan(){

    //     }
    // }
}
</script>

<style scoped>
.a-card-p-font-style{
  font-size: 16px;
  font-weight: 500;
}
</style>